<template>
  <section class="cooperation-consult" :style="{ backgroundImage: `url(${props.device.img})` }">
    <div class="consult-content">
      <!-- eslint-disable-next-line vue/no-v-html -->
      <p class="consult-text" v-html="props.device.desc"></p>
      <div class="consult-btn" @click="openCooperationDialog">{{ props.device.title }}</div>
    </div>
    <CooperationDialog ref="cooperationDialogRef" />
  </section>
</template>

<script setup lang="ts">
import CooperationDialog from '@/views/Ecosystem/sections/CooperationDialog.vue'

const props = defineProps({
  device: {
    type: Object,
    required: true,
    default: () => ({
      title: '合作咨询',
      desc: '欢迎健康产业链上下游企业，以及希望利用AI技术 升级健康产品与服务的企业与我们洽谈合作，共创产业新价值',
      img: 'https://images.health.ufutx.com/202506/20/c60d98038ab065c2e92dc67b938d45e2.png'
    })
  }
})
const cooperationDialogRef = ref<InstanceType<typeof CooperationDialog>>()

const openCooperationDialog = () => {
  cooperationDialogRef.value?.openDialog()
}
// // 18 import { ElButton } from 'element-plus'
</script>

<style scoped lang="less">
.cooperation-consult {
  color: #fff;
  padding: 60px 192px;
  text-align: left;
  background-image: url('https://images.health.ufutx.com/202506/20/c60d98038ab065c2e92dc67b938d45e2.png');
  background-size: cover;
  background-position: top;

  .consult-content {
    max-width: 1066px;
    //background: red;
    .consult-text {
      font-size: 36px;
      line-height: 56px;
      font-weight: 600;
      margin-bottom: 30px;
    }
    .consult-btn {
      width: 152px;
      color: #313fa8;
      font-size: 20px;
      font-weight: 500;
      padding: 16px 36px;
      border-radius: 100px;
      background: #fff;
      transition: all 0.2s;
      &:hover {
        box-shadow: 0 0 10px rgba(189, 189, 189, 0.8);
        transform: scale(1.1);
      }
    }
  }
}

/* 移动端适配（768px以下） */
@media (max-width: 768px) {
  .consult-btn {
    width: 60px !important;
    text-align: center;
  }
}
</style>
